<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<link rel="stylesheet" href="https://cdn.bootcss.com/cropper/4.0.0-beta/cropper.css">
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all">
<style>
  .font-size{
    font-size: 10px;
    width: 80px;
  }
  ._dc_crop_image_func_size_ li{
          width: 100%;
          padding: 10px 0px 0px 10px;
          text-align: center;
          display: flex;
          flex-direction: row;
          align-items: center;
  }
  .flex_row{
    display: flex;
    flex-direction: row;
    margin-right: 10px;
    align-items: center;
  }
  .dcdev-title{
    float: none;
    width: 71px;
  }
  .layui-form{
    width: 171px;
  }
  #_dc_crop_image_viewer{
    width: 50vw;
    height: 70vh;
    min-width: 300px;
    max-width: 80vw;
    max-height: 80vw;
  }
  .xx_flex_row{
    display: flex;
    flex-direction: row;
  }
  #_dc_crop_image_show_div{
    
  }
  #_dc_crop_image_container_{
    position: absolute; z-index: 999999;background-color: white;display: none;left: 50%; top: 50%;transform: translate(-50%, -50%);
  }
  @media screen and (max-width: 1000px) {
    .xx_flex_row{
    flex-direction: column;
    }
    .flex_row{
      margin-bottom: 10px;
    }
  }
  @media screen and (max-width: 600px) {
    .xx_flex_row{
    flex-direction: column;
    margin-left: 10px;
    }
    .flex_row{
      margin-bottom: 10px;
    }
    #_dc_crop_image_viewer{
    width: 70vw;
    height: 25vh;
 
   }
   #_dc_crop_image_container_{

     flex-direction: column;
   }
   #_dc_crop_image_show{
     display: none;
   }
  }
</style>
<script src="https://cdn.bootcss.com/cropper/4.0.0-beta/cropper.js"></script>
<!-- <script src="https://www.layuicdn.com/layui/layui.all.js"></script> -->
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<!-- 全屏遮罩层 -->
<div id="_dc_crop_image_mask_" class="_dcdev_preset_"
  style="z-index:99999;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:black;opacity:0.8;display:none;">
</div>
<!-- 裁剪框容器 -->
<div id="_dc_crop_image_container_" >
  <!-- 预览框 -->
  <div id="_dc_crop_image_viewer" style="border: 1px solid rgb(221, 221, 221); margin: 10px;">
    <img id="_dc_crop_image_viewer_img_">
  </div>
  <!-- 功能框 -->
  <div id="_dc_crop_image_func_container__" >
    <div id="_dc_crop_image_func_container_" style="text-align: center; margin-top: 10px;">
      <div style="text-align:center;">
        <div draggable="true" id="_dc_crop_image_preview_" class="circular previewImg"
          style="display: none; margin: 0px auto; width: 80px; height: 80px; border-radius: 50%; border: 1px solid lightgray;">
        </div>
      </div>


      <div id="_dc_crop_image_func_size_">
        <div class="xx_flex_row">
                  <!-- 图片操作 -->
                  <div class="flex_row">
                    <div class="dcdev-title font-size">图片操作</div>
                    <button id="_dc_crop_image_small_" type="button" class="layui-btn layui-btn-primary layui-btn-sm">-</button>
                    <button id="_dc_crop_image_big_" type="button" class="layui-btn layui-btn-primary layui-btn-sm">+</button>
                    <button id="_dc_crop_image_select_" type="button" class="layui-btn layui-btn-primary layui-btn-sm">图</button>
                   </div>
        </div>

        <div class="xx_flex_row">

            <!-- 图片大小位置 -->
            <div class="flex_row">
              <div class="dcdev-title font-size">图片大小</div>
              <input class="font-size" style="width:70px;" id="_dc_crop_image_w_" readonly="readonly">
              <span style="padding: 10px;vertical-align: -webkit-baseline-middle;">×</span>
              <input class="font-size" style="width:70px;" id="_dc_crop_image_h_" readonly="readonly">
            </div>
            <!-- 图片大小位置 -->
            <div class="flex_row">
              <div class="dcdev-title font-size">裁剪定位</div>
              <input class="font-size" type="number" style="width:70px;" id="_dc_crop_image_x_" >
              <span style="padding: 10px;vertical-align: -webkit-baseline-middle;">×</span>
              <input class="font-size" type="number" style="width:70px;" id="_dc_crop_image_y_" >
            </div>
        </div>
        <div class="xx_flex_row">
          <div style="display: none;"></div>
          <!-- 裁剪大小 -->
          <div class="flex_row">
            <div class="dcdev-title  font-size">裁剪大小</div>
            <input class="font-size" type="number" style="width:70px;" id="_dc_crop_image2_w_">
            <span style="padding: 10px;vertical-align: -webkit-baseline-middle;">×</span>
            <input class="font-size" type="number" style="width:70px;" id="_dc_crop_image2_h_">
          </div>
          <!-- 裁剪比例 -->
          <div class="flex_row" >
            <div class="dcdev-title font-size" >裁剪比例</div>
            <div class="layui-form" >
              <select id="image_select" name="image_select" lay-filter="image_select">
                <option value="">自定义</option>
                <option value="1:1">1:1</option>
                <option value="4:3">4:3</option>
                <option value="16:9">16:9</option>
             </select>
            </div>
          </div>
        </div>
        <div class="xx_flex_row">
              <!-- 预设大小 -->
              <div class="flex_row">
                <div class="dcdev-title font-size">预设大小</div>
                <div style="width: 170px;" class="layui-form">
                  <select  name="image_select_size" lay-filter="image_select_size">
                    <option value="">无</option>
                    <option value="24*24">头像(24*24)</option>
                    <option value="30*30">头像(30*30)</option>
                    <option value="50*50">头像(50*50)</option>
                    <option value="300*300">微信朋友圈(300*300)</option>
                    <option value="1280*720">手机(1280*720)</option>
                    <option value="1920*1080">手机(1920*1080)</option>
                    <option value="800x600">电脑(800x600)</option>
                    <option value="1024x768">电脑(1024x768)</option>
                    <option value="1920*1080">电脑(1920*1080)</option>
                </select>
                </div>
              </div>

              <!-- 裁剪位置 -->
              <div class="flex_row">
              <div class="dcdev-title font-size">裁剪形状</div>
              <div class="layui-form">
                <select name="image_select_shape" lay-filter="image_select_shape">
                  <option value="frame">框型</option>
                  <option value="circle">圆形</option>
              </select>
              </div>
              </div>
          </div>
        <!-- <ul>
          <li id="_dc_crop_image_func_panel_mobile_" style="display: none;"></li>
          <li>
            <div class="flex_row">
              <div class="dcdev-title font-size">图片大小</div>
              <input class="font-size" style="width:70px;" id="_dc_crop_image_w_" readonly="readonly">
              <span style="padding: 10px;vertical-align: -webkit-baseline-middle;">×</span>
              <input class="font-size" style="width:70px;" id="_dc_crop_image_h_" readonly="readonly">
            </div>
            <div class="flex_row">
              <div class="dcdev-title  font-size">裁剪大小</div>
              <input class="font-size" type="number" style="width:70px;" id="_dc_crop_image2_w_">
              <span style="padding: 10px;vertical-align: -webkit-baseline-middle;">×</span>
              <input class="font-size" type="number" style="width:70px;" id="_dc_crop_image2_h_">
            </div>
          </li>
          <li style="    width: 100%;
          padding: 10px 0px 0px 10px;
          text-align: center;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;">
            <div class="dcdev-title" style="font-size: 5px;">裁剪大小</div>
            <input type="number" style="width:70px;" id="_dc_crop_image2_w_">
            <span style="padding: 10px;vertical-align: -webkit-baseline-middle;;">×</span>
            <input type="number" style="width:70px;" id="_dc_crop_image2_h_">
          </li> 
          <li style="    width: 100%;
          padding: 10px 0px 0px 10px;
          text-align: center;
          display: flex;
          flex-direction: row;
          align-items: center;">
            <div class="dcdev-title" style="font-size: 5px;">裁剪比例</div>
            <div class="layui-form">
              <select id="image_select" name="image_select" lay-filter="image_select">
                <option value="">自定义</option>
                <option value="1:1">1:1</option>
                <option value="4:3">4:3</option>
                <option value="16:9">16:9</option>
             </select>
            </div>
            <div class="font-size">预设大小</div>
            <div class="layui-form">
              <select name="image_select_size" lay-filter="image_select_size">
                <option value="">无</option>
                <option value="24*24">头像(24*24)</option>
                <option value="30*30">头像(30*30)</option>
                <option value="50*50">头像(50*50)</option>
                <option value="300*300">微信朋友圈(300*300)</option>
                <option value="1280*720">手机(1280*720)</option>
                <option value="1920*1080">手机(1920*1080)</option>
                <option value="800x600">电脑(800x600)</option>
                <option value="1024x768">电脑(1024x768)</option>
                <option value="1920*1080">电脑(1920*1080)</option>
             </select>
            </div>
          </li>
           <li style="    width: 100%;
          padding: 10px 0px 0px 10px;
          text-align: center;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;">
            <div class="dcdev-title" style="font-size: 5px;">输出大小</div>
            <div class="layui-form">
              <select name="image_select_size" lay-filter="image_select_size">
                <option value="">原图像素</option>
                <option value="720">手机配图(500KB)</option>
                <option value="1080">电脑配图(1M)</option>
                <option value="2k">2k分辨率(2M)</option>
             </select>
            </div>
          </li>
          <li style="    width: 100%;
          padding: 10px 0px 0px 10px;
          text-align: center;
          display: flex;
          flex-direction: row;
          align-items: center;">
            <div class="dcdev-title" style="font-size: 5px;">裁剪形状</div>
            <div class="layui-form">
              <select name="image_select_shape" lay-filter="image_select_shape">
                <option value="frame">框型</option>
                <option value="circle">圆形</option>
             </select>
            </div>
          </li>
        </ul> -->
      </div>
      <div id="_dc_crop_image_func_panel_" style="text-align:center;">
        <div class="layui-form">
          <!-- <input type="radio" lay-filter="image_ratio" name="image_ratio" value="" title="不限" checked="">
          <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i>
            <div>不限</div>
          </div>
          <input type="radio" lay-filter="image_ratio" name="image_ratio" value="1:1" title="1 : 1">
          <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
            <div>1:1</div>
          </div>
          <input type="radio" lay-filter="image_ratio" name="image_ratio" value="4:3" title="4 : 3">
          <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
            <div>4:3</div>
          </div>
          <input type="radio" lay-filter="image_ratio" name="image_ratio" value="16:9" title="16 : 9">
          <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
            <div>16:9</div>
          </div> -->
        </div>
        <!-- <div id="_dc_crop_image_select_"
          style="margin-top: 0px; margin-bottom: 6px; text-align: center; font-size: 12px;">选择图片</div> -->

        <input id="open_file_selector" type="file" style="display:none;">
        <div style="width:100%;text-align:center;    margin-left: -10px;">
          <a id="_dc_crop_image_scaleX_" style="margin-left: 10px;font-size:12px;">水平反转</a>
          <a id="_dc_crop_image_scaleY_" style="margin-left: 10px;font-size:12px;">上下反转</a>
          <a id="_dc_crop_image_rotate_left_" style="margin-left: 10px;font-size:12px;">向左旋转</a>
          <a id="_dc_crop_image_rotate_right_" style="margin-left: 10px;font-size:12px;">向右旋转</a>
        </div>
      </div>
    </div>
    <div id="_dc_crop_image_show_div" style="text-align:center;margin-top: 10px;">
      <img id="_dc_crop_image_show" />
    </div>
    <div id="_dc_crop_image_button_panel_" style="width:100%;text-align:right;margin-top: 10px;">
      <div id="_dc_crop_image_info_"></div>
      <button id="_dc_crop_image_confirm_">确定</button><button id="_dc_crop_image_cancel_"
        style="margin:10px;margin-top: 2px;">取消</button>
    </div>
  </div>
</div>


<script>
  /**
    20200713 author：黄鉴熙
    修改：
    1、配置了layui路径
    2、新增了选择裁剪比例
    3、新增了输入框输入宽高制定裁剪大小
    4、新增了从剪辑板获取图片功能，只支持ctrl+V
    5、新增了拖拽加载图片
  **/
  //配置layui的目录路径，否则无法加载相应的模块 
  layui.config({
    dir: 'https://www.layuicdn.com/layui-v2.5.6/' //layui.js 所在路径（注意，如果是 script 单独引入 layui.js，无需设定该参数。），一般情况下可以无视
    ,version: false //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值，如：201610
    ,debug: false //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面
    ,base: '' //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
  });

  //监听选择裁剪大小选项 
  layui.use(['layer','form'], function() {
      var form=layui.form;
      //监听事件
      // form.on('radio(image_ratio)', function (data) {
      //   console.log(data);
      //   switch (data.value) {
      //     case "1:1":
      //       console.log("裁剪设置为1：1");
      //       $('#_dc_crop_image_viewer_img_').cropper('setAspectRatio',1/1);
      //       break;
      //     case "4:3":
      //       console.log("裁剪设置为4：3");
      //       $('#_dc_crop_image_viewer_img_').cropper('setAspectRatio',4/3);
      //       break;
      //     case "16:9":
      //       console.log("裁剪设置为16：9");
      //       $('#_dc_crop_image_viewer_img_').cropper('setAspectRatio',16/9);
      //       break;
      //     default:
      //       console.log("裁剪设置为不限");
      //       $('#_dc_crop_image_viewer_img_').cropper('setAspectRatio',null);
      //       break;
      //   }
      // });
      layui.form.on('select(image_select)', function (data) {
        console.log(data);
        switch (data.value) {
          case "1:1":
            console.log("裁剪设置为1：1");
            $('#_dc_crop_image_viewer_img_').cropper('setAspectRatio',1/1);
            break;
          case "4:3":
            console.log("裁剪设置为4：3");
            $('#_dc_crop_image_viewer_img_').cropper('setAspectRatio',4/3);
            break;
          case "16:9":
            console.log("裁剪设置为16：9");
            $('#_dc_crop_image_viewer_img_').cropper('setAspectRatio',16/9);
            break;
          default:
            console.log("裁剪设置为不限");
            $('#_dc_crop_image_viewer_img_').cropper('setAspectRatio',null);
            break;
        }
      })
      layui.form.on('select(image_select_size)', function (data) {
        console.log(data);
        var temp = data.value.split('*');
        _change_crop_width_height_(temp[0],temp[1]);
        // switch (data.value) {
        //   case "24*24":
        //     console.log("设置大小为24*24");

        //     _change_crop_width_height_(24,24);
        //     break;
        //   case "1080":
        //     console.log("设置大小为720p，按照图片最大比例计算。");
        //     window._dc_crop_image_output_size_w=1080;
        //     window._dc_crop_image_output_size_h=1920;
        //     break;
        //   case "2k":
        //     console.log("设置大小为720p，按照图片最大比例计算。");
        //     window._dc_crop_image_output_size_w=1440;
        //     window._dc_crop_image_output_size_h=2560;
        //     break;
        //   default:
        //     console.log("预设：无");
        //     window._dc_crop_image_output_size_w=null;
        //     window._dc_crop_image_output_size_h=null;
        //     break;
        // }
      })
      layui.form.on('select(image_select_shape)', function (data) {
        console.log(data);
        switch (data.value) {
          case "frame":
            console.log("框型");
            $(`.cropper-view-box`).css("border-radius", "0%");
            $(`.cropper-face`).css("border-radius", "0%");
            window.shape='frame';
            break;
          case "circle":
            console.log("圆形");
            $(`.cropper-view-box`).css("border-radius", "50%");
            $(`.cropper-face`).css("border-radius", "50%");
            window.shape='circle';
            break;
          default:
            break;
        }
      })
    });
  //监听输入框w值改变
  $("#_dc_crop_image2_w_").on("input propertychange",function(event){
    console.log("正在改变。");
    _change_crop_width_height_($("#_dc_crop_image2_w_").val(),$("#_dc_crop_image2_h_").val());

  });
  //监听输入框h值改变
  $("#_dc_crop_image2_h_").on("input propertychange",function(event){
    console.log("正在改变。");
    _change_crop_width_height_($("#_dc_crop_image2_w_").val(),$("#_dc_crop_image2_h_").val());
  });
  //监听输入框x值改变
  $("#_dc_crop_image_x_").on("input propertychange",function(event){
    console.log("正在改变。");
    _change_crop_x_y_($("#_dc_crop_image_x_").val(),$("#_dc_crop_image_y_").val());
  });
  //监听输入框y值改变
  $("#_dc_crop_image_y_").on("input propertychange",function(event){
    console.log("正在改变。");
    _change_crop_x_y_($("#_dc_crop_image_x_").val(),$("#_dc_crop_image_y_").val());
  });
  //修改选区大小同一函数
  function _change_crop_width_height_(w,h){
    console.log(parseInt(w),parseInt(h));
    if(w=="" || h==""){
      return
    }
    $('#_dc_crop_image_viewer_img_').cropper('setCropBoxData',{"width":parseInt(w),"height":parseInt(h)});
  }
    //修改选区xy同一函数
    function _change_crop_x_y_(x,y){
      if(x=="" || y==""){
      return
    }
    console.log(parseInt(x),parseInt(y));
    $('#_dc_crop_image_viewer_img_').cropper('setCropBoxData',{"left":parseInt(x),"top":parseInt(y)});
  }
  //监听预览区粘贴
  $('#_dc_crop_image_container_').on('paste',function(e){
    console.log("粘贴");
    var clipboardData = event.clipboardData,i = 0,items, item, types;
    if( clipboardData ){
        items = clipboardData.items;
        if( !items ){
          console.log("浏览器不支持读取。")
            return;
        }
        item = items[0];
        // 判断保存在剪贴板中的数据类型
        types = clipboardData.types || [];
        for( ; i < types.length; i++ ){
            if( types[i] === 'Files' ){
                item = items[i];
                break;
            }
        }
        // 判断是否为图片数据
        if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
              //读取图片转换成base64并赋值给cropper
                var file = item.getAsFile(),
                reader = new FileReader();
                // 读取文件后将其显示在预览框中
                reader.onload = function( e ){
                    var img = new Image();
                    replaceSrc = e.target.result;
                    getImageSize(replaceSrc);
                    $('#_dc_crop_image_viewer_img_').cropper('replace', replaceSrc, false); //默认false，适应高度，不失真
                };
                // 读取文件
                reader.readAsDataURL(file);
        }else{
          console.log("不是图片。")
        }
    }
  });

  //拖拽加载图片
  var view = $("#_dc_crop_image_viewer").get(0);
  //进入
  view.ondragenter = function() {

  }
  //移动，阻止默认行为
  view.ondragover = function(e) {
    e.preventDefault();
  }
  //离开
  view.onleave = function() {

  }
  //拖拽放置，也需要阻止默认行为
  view.ondrop = function(e) {
    e.preventDefault();
    //获取拖拽过来的对象,文件对象集合
    var fs = e.dataTransfer.files;
    //打印长度
    console.log(fs.length);
    //循环多文件拖拽上传
    for (var i = 0; i < fs.length; i++) {
      //文件类型
      var _type = fs[i].type;
      console.log(_type);
      //判断文件类型
      if (_type.indexOf('image') != -1) {
        //文件大小控制
        console.log(fs[i].size);
        //读取文件对象
        var reader = new FileReader();
        //读为DataUrl,无返回值
        reader.readAsDataURL(fs[i]);
        //当读取成功时触发，this.result为读取的文件数据
        reader.onload = function() {
            //文件数据
            //console.log(this.result);
            getImageSize(this.result);
            $('#_dc_crop_image_viewer_img_').cropper('replace', this.result, false); //默认false，适应高度，不失真
          }
      } else {
        alert('请上传图片文件！');
      }
    }
  };
  function _dc_crop_image_set_center_(id) {
    // if (browser_info.is_mobile) {
    //   return;
    // }
    // $(`#${id}`)
    //   .css("top", (browser_info.height - $(`#${id}`).height()) / 2)
    //   .css("left", (browser_info.width - $(`#${id}`).width()) / 2);
  }
  // // 移动版横屏
  function mobile_lanscape() {
    // $(`#_dc_crop_image_preview_`).css("width", 80).css("height", 80).css("margin", '0');
    // $(`#_dc_crop_image_func_container_`).css("display", "display:-webkit-inline-box;").css("text-align", "center");
    // $(`#_dc_crop_image_viewer`).css("height", browser_info.height - 40 + "px");
    // $(`#_dc_crop_image_viewer`).css("width", browser_info.height - 40 + "px");
    // $(".preview-box-parcel").css("position", "absolute").css("top", "40px").css("right", "30px")
    $("#_dc_crop_image_container_").css("flex-direction", "row");
     $("#_dc_crop_image_container_").css("top", "0");
     $("#_dc_crop_image_container_").css("left", "7%");
     $("#_dc_crop_image_container_").css("transform", "none");
     $(`#_dc_crop_image_viewer`).css("height","80vh");
  }
  // // 移动版竖屏
  function mobile_portrait() {
    // $(`#_dc_crop_image_container_`).css("display", "").css("width", browser_info.width - 20);

    // $(`#_dc_crop_image_select_`).css("margin-top", 0).css("margin-bottom", 6);
    // $(`#_dc_crop_image_func_container__`).css("margin-right", 0);
    $("#_dc_crop_image_container_").css("flex-direction", "column");
  }

  // 移动端
  if (browser_info.is_mobile) {
    // 竖屏
    if (browser_info.width < browser_info.height) {
      mobile_portrait();
    }
    // 横屏
    else {
      mobile_lanscape();
    }
  }
  // // 桌面端
  // else {
  //   $(`#_dc_crop_image_preview_`).css("width", 80).css("height", 80).css("margin", '0px auto');
  //   $(`#_dc_crop_image_func_container_`).css("display", "").css("text-align", "center");
  //   $(`#_dc_crop_image_viewer`).css("height","calc(100vh - 400px)");
  //   $(`#_dc_crop_image_viewer`).css("width", "30vw");
  //   $(".preview-box-parcel").css("position", "absolute").css("top", "40px").css("right", "30px")
  // }

  $(`#_dc_crop_image_cancel_`).click(function () {
    $(`#_dc_crop_image_`).remove();
  })

  // 设置屏幕居中
  _dc_crop_image_set_center_("_dc_crop_image_container_");

  //图片
  $(`#_dc_crop_image_select_`).click(function () {
    $("#open_file_selector").click();
  });
  //图片放大
  $(`#_dc_crop_image_big_`).click(function () {
    $('#_dc_crop_image_viewer_img_').cropper("zoom",+1);
  });
  //图片缩小
  $(`#_dc_crop_image_small_`).click(function () {
    $('#_dc_crop_image_viewer_img_').cropper("zoom",-1);
  });
  //左旋转
  $(`#_dc_crop_image_rotate_left_`).click(function () {
    $('#_dc_crop_image_viewer_img_').cropper("rotate", 45);
  });
  //右旋转
  $(`#_dc_crop_image_rotate_right_`).click(function () {
    $('#_dc_crop_image_viewer_img_').cropper("rotate", -45);
  });

  //水平反转
  var flagX = true;
  $(`#_dc_crop_image_scaleX_`).click(function () {
    if (flagX) {
      $('#_dc_crop_image_viewer_img_').cropper("scaleX", -1);
      flagX = false;
    } else {
      $('#_dc_crop_image_viewer_img_').cropper("scaleX", 1);
      flagX = true;
    }
    flagX != flagX;
  });
  //上下反转
  var flagY = true;
  $(`#_dc_crop_image_scaleY_`).click(function () {
    if (flagY) {
      $('#_dc_crop_image_viewer_img_').cropper("scaleY", -1);
      flagY = false;
    } else {
      $('#_dc_crop_image_viewer_img_').cropper("scaleY", 1);
      flagY = true;
    }
    flagY != flagY;
  });
  $("#open_file_selector").bind('change', function () {
    selectImg(this);
  })
  crop_image = {
    // 显示loading
    crop: function (data, cb) {
      window["_dc_crop_image_data_"] = data;
      window["_dc_crop_image_cb_"] = cb;
      
      $(`#_dc_crop_image_mask_`).css("display","block");
      if (browser_info.is_mobile) {
        $(`#_dc_crop_image_container_`).css("display","flex");
      }else{
        $(`#_dc_crop_image_container_`).css("display","flex");
        // $(`#_dc_crop_image_func_container__`).css("margin-right","10px");
      }
      data.preview = '.previewImg' //预览视图
      data.ready=function () {
          console.log("ready");
          getImageSize();
      };
      // data.cropstart=function (e) {
      //     console.log("cropstart");
      // };
      data.cropmove = function (e) {

      };
      data.crop=function(e){
        //实时获取截选区域大小
        console.log($('#_dc_crop_image_viewer_img_').cropper('getCropBoxData',));;
        var data=$('#_dc_crop_image_viewer_img_').cropper('getCropBoxData',);
        $("#_dc_crop_image2_h_").val(parseInt(data.height));
        $("#_dc_crop_image2_w_").val(parseInt(data.width));
        $("#_dc_crop_image_x_").val(parseInt(data.left));
        $("#_dc_crop_image_y_").val(parseInt(data.top));
        //实时截图图片代码
            var cas = parent.$('#_dc_crop_image_viewer_img_').cropper('getCroppedCanvas', {
          // width: window._dc_crop_image_output_size_w,
          // height: window._dc_crop_image_output_size_h
          width:200,
          height:200
        }); //获取被裁剪后的canvas
        if(window.shape=='circle'){
          var canvas = document.createElement('canvas');
          var context = canvas.getContext('2d');
          var width = cas.width;
          var height = cas.height;
          canvas.width = width;
          canvas.height = height;
          context.imageSmoothingEnabled = true;
          context.drawImage(cas, 0, 0, width, height);
          context.globalCompositeOperation = 'destination-in';
          context.beginPath();
          context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
          context.fill();
          var copperphotoImgUrl = canvas.toDataURL('image/png');
        }else{
          var copperphotoImgUrl = cas.toDataURL('image/jpeg');
        }

        $('#_dc_crop_image_show').attr('src', copperphotoImgUrl);

      }
      // data.cropend = function (e) {
      //   console.log("cropend", e);
      // };
      // data.zoom= function (e) {
      //     console.log("zoom");
      // };
      var cropperSet = data;
      //cropper图片裁剪
      $('#_dc_crop_image_viewer_img_').cropper(cropperSet);
      // 是否自动选择图片
      if (window["_dc_crop_image_data_"].autoSelectImg)
        $(`#_dc_crop_image_select_`).click()
    },
  }
  $("#_dc_crop_image_viewer_img_").on("click", function () {
    console.log($('#_dc_crop_image_viewer_img_').cropper('getData', true));;
  })
  //生成图片
  $("#_dc_crop_image_confirm_").click(function () {
    var cas = parent.$('#_dc_crop_image_viewer_img_').cropper('getCroppedCanvas', {
      // width: window._dc_crop_image_output_size_w,
      // height: window._dc_crop_image_output_size_h
      width:$("#_dc_crop_image2_w_").val(),
      height:$("#_dc_crop_image2_h_").val()
    }); //获取被裁剪后的canvas
    if(window.shape=='circle'){
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var width = cas.width;
      var height = cas.height;
      canvas.width = width;
      canvas.height = height;
      context.imageSmoothingEnabled = true;
      context.drawImage(cas, 0, 0, width, height);
      context.globalCompositeOperation = 'destination-in';
      context.beginPath();
      context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
      context.fill();
      var copperphotoImgUrl = canvas.toDataURL('image/png');
    }else{
      var copperphotoImgUrl = cas.toDataURL('image/jpeg');
    }
    scale_size(copperphotoImgUrl)
    if (window["_dc_crop_image_cb_"]) {
      console.log($('#_dc_crop_image_viewer_img_').cropper('getImageData', ));;
      console.log($('#_dc_crop_image_viewer_img_').cropper('getCropBoxData', ));;

      window["_dc_crop_image_cb_"](copperphotoImgUrl)
    }
    console.log(copperphotoImgUrl)

  });
  //执行压缩操作
  function scale_size(imgData){
    var img = new Image();
    var w=0;
    var h=0;
    img.onload = function(){
      console.log('height',img.height);
      h=img.height;
      console.log('width',img.width);
      w=img.width;
    };
    img.src = imgData;
    console.log("图片的高度是"+w+","+h);
  };
  //获取图片大小
  function getImageSize(imgData){
    // var img = new Image();
    // img.onload = function(){
    //   console.log('height',img.height);
    //   $("#_dc_crop_image_h_").val(img.height);
    //   console.log('width',img.width);
    //   $("#_dc_crop_image_w_").val(img.width);
    // };
    // img.src = imgData;
    console.log($('#_dc_crop_image_viewer_img_').cropper('getImageData', ));
    var img = $('#_dc_crop_image_viewer_img_').cropper('getImageData', );
    $("#_dc_crop_image_h_").val(parseInt(img.height) );
    $("#_dc_crop_image_w_").val(parseInt(img.width));
  };
  function selectImg(file) {
    if (!file.files || !file.files[0]) {
      return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
      var replaceSrc = evt.target.result;
      //更换cropper的图片
      $('#_dc_crop_image_viewer_img_').cropper('replace', replaceSrc, false); //默认false，适应高度，不失真
    }
    reader.readAsDataURL(file.files[0]);
  }

  //监听手机屏幕因旋转或进入文本框之后的变化
  window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize233", function () {
    // 横屏
    if (window.orientation == 90 || window.orientation == 270) {
      mobile_lanscape();
    }
    // 竖屏
    else {
      mobile_portrait();
    }
  }, false);

  function returnResult(data, callback) {
    return callback(data);
  }
</script>